<script type="text/x-template"  id="treeSelectComponent">
    <el-popover placement="bottom" v-model="show" width="215" trigger="click">
        <el-tree :data="data" ref="tree" 
				 :show-checkbox="showCheckBox" 
				:props="props" 
				:node-key="nodeKey" 
				:default-checked-keys="defaultCheckedKeys" 
				:check-on-click-node="checkOnClickNode"
				@node-click="nodeClick"
				@check="handleCheck"
				style="width:215px;"
				:popper-options="popperOptions"
				:visible-arrow="visibleArrow"
				:default-expanded-keys="defaultExpandedKeys"
				highlight-current
				></el-tree>
        <el-input v-model="selectedContent" readonly="readonly" slot="reference" style="width:220px;">请选择</el-input>
    </el-popover>
</script>
<script type="text/javascript">
		var treeSelectComponentJs = {
			template:'#treeSelectComponent'
			, props:{
				props:{
					type: Object
					,default:{
						children: 'children'
			            ,label: 'text'
					}
				}
				,popperOptions:{
					type: Object
					,default:{
						boundariesElement: 'parent'
			            ,positionFixed: true
			            ,placement: 'bottom'
					}
				}
				,nodeKey:{
					type: String
					,default:'id'
				}
				,data:{
					type:Array
					,default:[]
				}
				,defaultCheckedKeys:{
					type:Array
					,default:[]
				}
				,showCheckBox:{
					type:Boolean
					,default:false
				}
				,checkOnClickNode:{
					type:Boolean
					,default:true
				}
			}
			,data:function() {
				return {
					show: false
					,selectedContent:''
					,visibleArrow:false
					,defaultExpandedKeys:[]
				}
			}
			,methods:{
				nodeClick:function(data){
					if(this.showCheckBox){
						//多选
						const nodes = this.$refs.tree.getCheckedNodes();
						if(nodes){
							this.selectedContent='';
							for(var i=0;i<nodes.length;i++){
								this.selectedContent = this.selectedContent+nodes[i][this.props.label]+','
							}
						}
					}else{
						//单选
						this.selectedContent = data[this.props.label]
					}
					this.show=false;
				}
			 	,handleCheck:function(data, status) {
			 		if(!this.showCheckBox){
			 			return;
			 		}
			 		var datas = status.halfCheckedNodes;
			 		this.selectedContent='';
					for(var i=0;i<datas.length;i++){
						this.selectedContent = this.selectedContent+datas[i][this.props.label]+','
					}
					datas = status.checkedNodes;
					for(var i=0;i<datas.length;i++){
						this.selectedContent = this.selectedContent+datas[i][this.props.label]+','
					}
			    }
			 	,getValue:function(){
			 		if(this.showCheckBox){
			 			const nodes = this.$refs.tree.getCheckedNodes();
			 			var values = new Array();
			 			for(var i=0;i<nodes.length;i++){
			 				values.push(nodes[i][this.nodeKey]);
						}
			 			return values;
			 		}else{
			 			return this.$refs.tree.getCurrentKey();
			 		}
			 		return "";
			 	}
			 	,getCurrentNode:function(){
			 		if(this.showCheckBox){
			 			var nodes = this.$refs.tree.getCheckedNodes();
			 			return nodes;
			 		}else{
			 			return this.$refs.tree.getCurrentNode();
			 		}
			 		return null;
			 	}
			 	,setCurrentKey:function(data){
		 			this.selectedContent='';
			 		if(this.showCheckBox){
				 		this.$refs.tree.setCheckedKeys(data);
				 		this.defaultExpandedKeys = data;
				 		if(!data){
				 			return;
				 		}
			 			var datas = this.$refs.tree.getHalfCheckedNodes();
						for(var i=0;i<datas.length;i++){
							this.selectedContent = this.selectedContent+datas[i][this.props.label]+','
						}
						datas = this.$refs.tree.getCheckedNodes();
						for(var i=0;i<datas.length;i++){
							this.selectedContent = this.selectedContent+datas[i][this.props.label]+','
						}
			 		}else{
			 			this.$refs.tree.setCurrentKey(data);
			 			if(!data){
				 			this.defaultExpandedKeys = null;
				 			return;
				 		}
			 			this.defaultExpandedKeys = [data];
			 			var node = this.$refs.tree.getCurrentNode();
			 			if(node){
				 			this.selectedContent = node[this.props.label]
			 			}
			 		}
			 	}
			}
			,created: function(){
			}
			,watch:{
				defaultCheckedKeys:function(n,o){
				}
			}
		}
</script>
